
import React,{useEffect,useState} from 'react';
import { Layout,Input,Button,Table } from 'antd'
import axios from 'axios';

const { Content } = Layout;
const {  Search } = Input;
function Role(props) {
    const onSearch=(value)=>{
        console.log(value);
    }
    const columns =[
        {
            title:'角色名称',
            dataIndex:'rolename',
        },
        {
            title:'角色类型',
            dataIndex:'roletype',
        },
        {
            title:'描述',
            dataIndex:'description',
        },
        {
            title:'操作',
            render:(text,record)=>(
                <>
                 <span className="iconfont icon-xiugai"></span>
                <spam className="iconfont icon-shanchu"></spam>
                </>
            )
        }
    ];
    var [roleList,setRoleList]=useState([]);
    var [loading,setLoading]=useState(false);
    var [pagination,setPagination]=useState({current:1,pageSize:5});
    useEffect(()=>{
        setLoading(true);
        axios.get('/api/role',{params:pagination}).then((res)=>{
           setLoading(false);
            setRoleList(res.data.list);
            setPagination({...pagination,total:res.data.total})
        })
    },[])
    const handleChange=(newpagination)=>{
       setLoading(true);
        axios.get('/api/role',{params:newpagination}).then((res)=>{
           setLoading(false);
            setRoleList(res.data.list);
            setPagination({...newpagination,total:res.data.total})
        })
    }
    return (
        <div className="role">
            <Layout style={{ padding: '0 24px 24px' }}>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    <div className="title">角色权限管理</div>
                    <Search  allowClear placeholder="输入角色姓名" onSearch={onSearch} enterButton  style={{width:300}}/>
                    <Button type="primary">新增角色</Button>
                    <Table columns={columns} dataSource={roleList}  pagination={pagination} onChange={handleChange} loading={loading}/>
                </Content>
            </Layout>
        </div>
    );
}

export default Role;